<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 引用父组件 -->
			<son @func= "getMsg"></son>
			<!-- 组件模板定义 -->
		
			
			
		</div>
		<script type="text/javascript">
			/* 1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，
			同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
			2. 父组件将方法的引用传递给子组件，其中，`getMsg`是父组件中`methods`中定义的方法名称，
			`func`是子组件调用传递过来方法时候的方法名称 
			3. 子组件内部通过`this.$emit('方法名', 要传递的数据)`方式，来调用父组件中的方法，
			同时把数据传递给父组件使用*/
			
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'这是父组件中的信息'
				},
				methods:{
					getMsg(val){
						alert(val);
					}
				},
				components:{
					son:{
						template:' <input type="button" value="向父组件传值" @click="sendMsg" />',
						methods:{
							sendMsg(){
								this.$emit('func', 'OK'); 
							}
						}
					},
					
				}
			});
			
			
		</script>
	</body>
</html>
